<!--新增学生控件-->
<template>
  <!--添加按钮 begin-->
  <a-button class="editable-add-btn" type="primary" @click="showModal"> 新增学生 </a-button>
  <!--添加按钮 end-->

  <!--弹出对话框 begin-->
  <a-modal v-model:visible="visible" title="新增学生">
    <!--弹出对话框 footer 对话框页尾-->
    <template #footer>
      <a-button key="back" @click="handleCancel"> 关闭 </a-button>
      <a-button key="submit" type="primary" @click="onSubmit"> 提交 </a-button>
    </template>
    <!-- 获取用户输入信息用的 form 表单 begin-->
    <a-form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="学生学号">
        <a-input v-model:value="form.data.stu_code" />
      </a-form-item>
      <a-form-item label="学生姓名">
        <a-input v-model:value="form.data.stu_name" />
      </a-form-item>

      <a-form-item label="班级">
        <a-select v-model:value="form.data.region" placeholder="请选择班级">
          <a-select-option value="高计软1903-1"> 高计软1903-1 </a-select-option>
          <a-select-option value="高计软1903-2"> 高计软1903-2 </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="生日">
        <a-date-picker v-model:value="form.data.birthday" type="date" placeholder="请选择生日" style="width: 100%" />
      </a-form-item>
      <!-- 暂时不需要
      <a-form-item label="Instant delivery">
        <a-switch v-model:checked="form.delivery" />
      </a-form-item>
      
      <a-form-item label="Activity type">
        <a-checkbox-group v-model:value="form.type">
          <a-checkbox value="1" name="type"> Online </a-checkbox>
          <a-checkbox value="2" name="type"> Promotion </a-checkbox>
          <a-checkbox value="3" name="type"> Offline </a-checkbox>
        </a-checkbox-group>
      </a-form-item>

      <a-form-item label="Activity form">
        <a-input v-model:value="form.desc" type="textarea" />
      </a-form-item>
      -->
      <a-form-item label="性别">
        <a-radio-group v-model:value="form.data.stu_gender">
          <a-radio value="1"> 男 </a-radio>
          <a-radio value="2"> 女 </a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="学生照片">
        <a-input v-model:value="form.data.photo" />
      </a-form-item>
      <a-form-item label="学生电话">
        <a-input v-model:value="form.data.phone_num" />
      </a-form-item>
      <!--
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit"> Create </a-button>
        <a-button style="margin-left: 10px"> Cancel </a-button>
      </a-form-item>
      -->
    </a-form>
    <!-- 获取用户输入信息用的 form 表单 end-->
  </a-modal>
  <!-- 弹出对话框 end-->
</template>

<script>
import axios from 'axios';
import qs from 'qs';

export default {
  name: "NewStudent",
  data() {
    return {
      //loading: false,
      visible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        data: {
          stu_code: undefined,
          stu_name: "",
          stu_gender: undefined,
          birthday: undefined,
          photo: "",
          class_name: "",
          phone_num: "",
        },
      },
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    /*
    handleOk(e) {
      this.loading = true;
      setTimeout(() => {
        this.visible = false;
        this.loading = false;
      }, 3000);
    },
    */
    handleCancel(e) {
      this.visible = false;
    },
    onSubmit() {
      console.log("submit!", this.form.data);
      this.form.data.birthday=this.form.data.birthday.toISOString().substring(0,10);
      //this.form.data.birthday=new Date().toISOString().substring(0,10);
      console.log("生日",this.form.data.birthday);
      axios
      .post('http://127.0.0.1:8080/student/add_one',
              qs.stringify(this.form.data),
              //{headers:{'Content-type': 'application/x-www-form-urlencoded;charset=utf-8'}}
      )
      .then(response => (this.dataSource = response.data))
      .catch(function (error) { // 请求失败处理
          console.log(error);
      });
    },
  },
};
</script>
